<template>
  <el-card class="box-card">
    <template v-slot:header>
      <div class="header">
        <span>热销书籍</span>
      </div>
    </template>
    <el-row :gutter="0">
      <el-col :span="6" v-for="book in books" :key="book.id" class="book-container">
        <el-image :src="book.cover" class="image" @click="loadDetail(book.id)" />
        <div style="padding: 14px">
          <span id="price">￥ {{ book.price.toFixed(2) }}</span>
          <span id="title">{{ book.title }}</span>
          <span id="description">{{ pureText(book.description) }}</span>
          <div id="actions">
            <el-button icon="Money" @click="goDirectSettlement(book)" circle></el-button>
            <el-button
              :icon="isInCart(book.id) ? 'GoodsFilled' : 'Goods'"
              circle
              @click="updateCart(book.id)"
            ></el-button>
            <el-button
              :icon="isFavorite(book.id) ? 'StarFilled' : 'Star'"
              circle
              @click="updateFavorite(book.id)"
            ></el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import api from '@/api'
import { useUserStore } from '@/stores/user.js'
import { useCartStore } from '@/stores/cart.js'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'
import { storeToRefs } from 'pinia'


let books = ref([])
const userStore = useUserStore()
const cartStore = useCartStore()
const router = useRouter()

// const { favorite }= storeToRefs(userStore)
const { items } = storeToRefs(cartStore)

onMounted(async () => {
  books.value = (await api.warehouse.getAllProducts()).data
})

/**
 * 判断是否在收藏夹中
 **/
function isFavorite(id) {
  return userStore.state.favorite.find((id_item) => id_item === id)
}
/**
 * 判断是否在购物车中
 **/
function isInCart(id) {
  return cartStore.state.items.find((item) => item.id === id)
}
/**
 *快捷添加收藏夹，点一下加入，再点移除
 **/
function updateFavorite(id) {
  isFavorite(id) ? userStore.removeFavorite(id) : userStore.addFavorite(id)
  ElNotification({
    title: '成功',
    message: '恭喜你，已成功更新收藏夹',
    type: 'success',
  })
}
/**
 * 快捷添加购物车，点一下加入，再点移除（哪怕有多件）
 */
function updateCart(id) {
  isInCart(id)
    ? cartStore.removeCartItem(id)
    : cartStore.addCartItem({ ...this.books.find((i) => i.id === id) })
  ElNotification({
    title: '成功',
    message: '恭喜你，已成功更新购物车',
    type: 'success',
  })
}
/**
 * 转到商品详情页面
 */
function loadDetail(id) {
  router.push(`/detail/${id}`)
}
/**
 * 去除HTML标签
 */
function pureText(text) {
  return api.stringUtil.pureText(text)
}
/**
 * 直接支付购买
 */
function goDirectSettlement(product) {
  let item = { ...product, amount: 1 }
  cartStore.setupSettlementBillWithDefaultValue({ items: [item] })
  router.push('/settle')
}
</script>

<style scoped>
.image {
  width: 300px;
  height: 300px;
}

#price {
  font-family: Arial, serif;
  font-size: 18px;
  font-weight: bolder;
  color: #d44d44;
  display: block;
}

#title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 8px;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 5px 0 10px 0;
  display: block;
}

#description {
  font-size: 12px;
  color: #999;
  text-align: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#actions {
  padding: 10px 10px 0 0;
}

.book-container {
  padding: 20px 0;
  border: 1px solid #fff;
  transition: 0.2s;
}

.book-container:hover {
  border: 1px solid #ddd;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
</style>
